<template>
  <draggable class="dragArea" @add="deepClone" tag="ul" :list="children" v-bind="options">
    <li v-for="el in children" :key="el.ref">
      <el-card>
        {{ el.tag }}
        <el-button icon="el-icon-edit" type="text" @click="openJson(el)"></el-button>
        <el-button icon="el-icon-delete" type="text" @click="deleteJson(el)"></el-button>
        <r-nested-draggable v-if="el.children" :children="el.children" :deepClone="deepClone" :openJson="openJson" :deleteJson="deleteJson" :options="options" />
      </el-card>
    </li>
  </draggable>
</template>
<script>
import draggable from 'vuedraggable'

export default {
  name: 'r-nested-draggable',
  props: {
    deepClone: {
      type: Function
    },
    openJson: {
      type: Function
    },
    deleteJson: {
      type: Function
    },
    children: {
      required: true,
      type: Array
    },
    options: {
      type: Object,
      default: () => {
        return {
          animation: 200,
          group: 'component',
          disabled: false,
          ghostClass: 'ghost'
        }
      }
    }
  },
  components: {
    draggable
  },
  computed: {},
  methods: {}
}
</script>
<style scoped>
.dragArea {
  min-height: 50px;
  outline: 1px dashed;
}
ul li {
  list-style-type: none;
}
</style>
